<template>
  <transition name="el-notification-fade">
    <div
      :class="[
        'el-notification',
        type == 'alarming' ? 'alarming-bgc' : 'alarmed-bgc',
        horizontalClass,
      ]"
      v-show="visible"
      :style="positionStyle"
      @mouseenter="clearTimer()"
      @mouseleave="startTimer()"
      @click="click"
      role="alert"
    >
      <div class="title-style">
        <img
          v-if="type == 'alarming'"
          src="./icon/alarming.png"
          style="width: 30px; height: 30px"
        />
        <img
          v-if="type == 'alarmed'"
          src="./icon/alarmed.png"
          style="width: 30px; height: 30px"
        />
        <div class="alarm-style">{{ alarmType }}</div>
      </div>

      <div class="el-notification__group">
        <div class="line-height">
          站点名称: <span class="spann">{{ siteName }}</span>
        </div>
        <div class="line-height">
          站点编号: <span class="spann">{{ siteNo }}</span>
        </div>
        <div
          v-if="alarmType == '温度告警' || alarmType == '取消温度告警'"
          class="line-height"
        >
          通道号: <span class="spann">{{ aisleNo }}</span>
        </div>
        <div class="line-height">
          告警时间: <span class="spann">{{ alarmTime }}</span>
        </div>
        <div class="line-height">
          告警详情:
          <span class="spann a-to" @click="warnsub(alarmId)">告警详情</span
          ><span style="margin-left: 4px">|</span
          ><span class="a-to" @click="ordersub(workNo)" style="margin-left: 4px"
            >工单详情</span
          >
        </div>

        <div
          class="el-notification__closeBtn el-icon-close"
          v-if="showClose"
          @click.stop="close"
        ></div>
      </div>
    </div>
  </transition>
</template>

<script>
import { log } from "three";
import app from "../../../main";
let typeMap = {
  success: "success",
  info: "info",
  warning: "warning",
  error: "error",
};

export default {
  data() {
    return {
      visible: false,
      alarmType: "",
      duration: 15000,
      siteName: "",
      siteNo: "",
      aisleNo: "",
      alarmTime: "",
      alarmId: "",
      workNo: "",
      type: "",
      showClose: true,
      onClose: null,
      onClick: null,
      closed: false,
      verticalOffset: 0,
      timer: null,
      dangerouslyUseHTMLString: false,
      position: "top-right",
    };
  },

  computed: {
    typeClass() {
      return this.type && typeMap[this.type]
        ? `el-icon-${typeMap[this.type]}`
        : "";
    },

    horizontalClass() {
      return this.position.indexOf("right") > -1 ? "right" : "left";
    },

    verticalProperty() {
      return /^top-/.test(this.position) ? "top" : "bottom";
    },

    positionStyle() {
      return {
        [this.verticalProperty]: `${this.verticalOffset}px`,
      };
    },
  },
  watch: {
    closed(newVal) {
      if (newVal) {
        this.visible = false;
        this.$el.addEventListener("transitionend", this.destroyElement);
      }
    },
  },

  methods: {
    //跳转到告警页面
    warnsub(item) {
      if (app.$route.path == "/warning") {
        return;
      }
      app.$router.push({
        path: "/warning",
        query: {
          warnnum: item,
        },
      });
    },
    //跳转到工单详情页面
    ordersub(item) {
      if (app.$route.path == "/workorder") {
        return;
      }
      app.$router.push({
        path: "/workorder",
        query: {
          workNo: item,
        },
      });
    },
    destroyElement() {
      this.$el.removeEventListener("transitionend", this.destroyElement);
      this.$destroy(true);
      this.$el.parentNode.removeChild(this.$el);
    },

    click() {
      if (typeof this.onClick === "function") {
        this.onClick();
      }
    },

    close() {
      this.closed = true;
      if (typeof this.onClose === "function") {
        this.onClose();
      }
    },

    clearTimer() {
      clearTimeout(this.timer);
    },

    startTimer() {
      if (this.duration > 0) {
        this.timer = setTimeout(() => {
          if (!this.closed) {
            this.close();
          }
        }, this.duration);
      }
    },
    keydown(e) {
      if (e.keyCode === 46 || e.keyCode === 8) {
        this.clearTimer(); // detele 取消倒计时
      } else if (e.keyCode === 27) {
        // esc关闭消息
        if (!this.closed) {
          this.close();
        }
      } else {
        this.startTimer(); // 恢复倒计时
      }
    },
  },
  mounted() {
    if (this.duration > 0) {
      this.timer = setTimeout(() => {
        if (!this.closed) {
          this.close();
        }
      }, this.duration);
    }
    document.addEventListener("keydown", this.keydown);
  },
  beforeDestroy() {
    document.removeEventListener("keydown", this.keydown);
  },
};
</script>
<style scoped>
.el-notification {
  color: white !important;
}
.alarming-bgc {
  background-image: -webkit-linear-gradient(
    left,
    rgba(0, 51, 153, 0.5) 0%,
    rgba(51, 102, 255, 0.5) 100%
  );
}
.alarmed-bgc {
  background-image: -webkit-linear-gradient(
    left,
    rgba(51, 102, 255, 0.5) 0%,
    rgba(0, 51, 153, 0.5) 100%
  );
}
.title-style {
  display: flex;
  align-items: center;
}
.alarm-style {
  font-size: 18px;
  margin-left: 50px;
}
.line-height {
  font-size: 14px;
  margin-top: 8px;
}
.spann {
  margin-left: 10px;
}
.a-to {
  color: gray;
}
.a-to:hover {
  cursor: pointer;
}
</style>

